<template>
  <div>
    <van-button
      class="comment-btn"
      type="default"
      round
      size="small"
      @click="
        isShow = true;
        puttype = type;
      "
      >写评论
    </van-button>
    <van-popup v-model="isShow" position="bottom" :style="{ height: '25%' }">
      <!-- 发表评论 -->
      <van-field
        v-model="message"
        rows="3"
        autosize
        type="textarea"
        maxlength="30"
        placeholder="请输入评论"
        show-word-limit
      />
      <van-button type="primary" @click="pubComment">发布</van-button>
    </van-popup>
  </div>
</template>

<script>
import { addComments } from '@/api/comment'
export default {
  name: 'WriteComment',
  inject: ['aid'],

  data () {
    return {
      message: '',
      isShow: false,
      type: 1,
      puttype: ''
    }
  },

  mounted () {},

  methods: {
    // 发送评论
    async pubComment () {
      try {
        const res = await addComments(this.aid, this.message)
        const newObj = res.data.data.new_obj
        console.log('评论', newObj)
        this.$bus.$emit('artCom', newObj)
        this.isShow = false
        this.message = ''
      } catch (error) {
        console.log('错误', error.target)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.comment-btn {
  width: 282px;
  height: 46px;
  border: 2px solid #eeeeee;
  font-size: 30px;
  line-height: 46px;
  color: #a7a7a7;
}
</style>
